<!--
 作者 : 唐梓元
 日期 : 2019-7-8
 版本 : 1.0
 描述 :浏览记录组件
 使用 : <home-eyes :eyesList="eyesList"></home-eyes>
 参数 :eyesList 为父组件传过来的值
 -->
<template>
  <div id="timeList">
    <div class="relt" v-for="(item,index) in getHomeData" :key="index" v-if="index<4&&getHomeData">
      <div class="timeBorder relt" v-text="item.DiscussDate"> </div>
      <div class="flex1 f img-name ">
        <span class="f-zhong"><img :src="item.OpManUrl||opmanUrl" alt=""> </span>
        <div class="overflow3"> <div v-text="item.OpMan.split('(')[0]"></div> <div v-text="item.Doc" class="overflow3" :title="item.Doc">xx小学</div></div>
      </div>
      <div class="eyes" v-if="item.OpManWorkYnitName" @click.stop="do_goSubjectDetail(item.ResultShowSN)"> <span >评价</span><span >《{{item.OpManWorkYnitName}}》</span></div>
    </div>

  </div>
</template>

<script>
    export default {
      name: "cm_home-eyes",
      props: {
        eyesList: Array
      },
      data() {
        return {
          opmanUrl: this.$ZcPublic.Domain + "static/img/manage/default2019927.jpg"
        }
      },
      created() {

      },
      // watch: {
      //   eyesList(valNew, valOld) {
      //     valNew.forEach((item) => {
      //       item.DiscussDate = this.getDate(item.CollectDate)
      //     })
      //   }
      // },
      methods: {
        getDate(dateTimeStamp) {//转化时间格式
          if (dateTimeStamp == undefined) {

            return false;
          } else {
            dateTimeStamp = new Date(dateTimeStamp)
            let now = new Date().getTime();//获取当前时间的时间戳
            let diffValue = now - dateTimeStamp;
            // console.log('后台时间',dateTimeStamp)
            // console.log('现在时间',now)
            // console.log('相差多少秒',diffValue)
            if (diffValue < 0) {
              console.log("结束日期不能小于开始日期！");
            }
            let minute = 1000 * 60;
            let hour = minute * 60;
            let day = hour * 24;
            let month = day * 30;

            let monthC = diffValue / month;
            let weekC = diffValue / (7 * day);
            let dayC = diffValue / day;
            let hourC = diffValue / hour;
            let minC = diffValue / minute;

            if (monthC >= 1) {
              // console.log(parseInt(monthC) + "个月前");
              return parseInt(monthC) + "个月前";
            }
            else if (weekC >= 1) {
              // console.log(parseInt(weekC) + "周前")
              return parseInt(weekC) + "周前"
            }
            else if (dayC >= 1) {
              // console.log(parseInt(dayC) + "天前")
              return parseInt(dayC) + "天前"
            }
            else if (hourC >= 1) {
              // console.log(parseInt(hourC) + "个小时前")
              return parseInt(hourC) + "个小时前"
            }
            else if (minC >= 1) {
              // console.log(parseInt(minC) + "分钟前")
              return parseInt(minC) + "分钟前"
            } else {
              // console.log("刚刚")
              return "刚刚"
            }
          }
        },
          do_goSubjectDetail(item){
            this.$router.push({name:"yw_subjectDetail",query:{SN:item}})
            // this.$router.push('yw_subjectDetail')
          }


      },
      computed: {
        getHomeData(){ //获取首页内容展示数据
          let eyesList=this.$store.getters.getHomeData.discussShow
          console.log('eyesList',eyesList)
          if(eyesList){
            eyesList.forEach((item) => {
              item.DiscussDate = this.getDate(item.DiscussDate)
            })
          }

          return eyesList;
        },
      }
    }
</script>

<style scoped>
  #timeList{
    padding: 10px 10px 10px 50px;
    position: relative;
  }
  #timeList *{
    font-size: 14px;
  }
  #timeList>div{
    margin-top: 10px;
  }
  #timeList>div:before{
    content: '';
    position: absolute;
    width: 1px;
    height: 83%;
    background-color: #E7E7E7;
    left: -14px;
    top:25%;
  }
  #timeList>div:after{
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    background-color: #E7E7E7;
    left: -18px;
    top: 8%;
  }
  .img-name span{
    width: 50px;
    height: 50px;
  }
  .img-name span img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .timeBorder{
    border: 1px solid #E7E7E7;
    display: inline-block;
    padding: 1px 9px;
    position: relative;
    top: -2px;
  }
  .timeBorder:before{
    content: "";
    position: absolute;
    width:0;
    height:0;
    border-width:5px 8px 5px;
    border-style:solid;
    border-color:  transparent #ebebeb transparent transparent;/*灰 透明 透明 */
    left: -16px;
    top:50%;
    margin-top: -5px;

  }
  .eyes,.eyes span{
    color:  #808080 !important;
    cursor: pointer;
  }
  .img-name>div{
    position: relative;
    top: 8px;
  }
  .img-name>div>div{
    height: 16px;
    left: 16px;
    padding-left: 10px;
  }
  .img-name>div>div:last-child{
    color: #999999;

  }
  .img-name>div>div:first-child{
    color: #797979;
  }
  .overflow3>.overflow3{
    height: 28px;
    line-height: 28px;
  }

</style>
